<template>
  <div class="register">
    <el-card :xl="6" :md="8" :sm="12" :xs="22" class="box-card card">
      <p class="login-welcome">&nbsp;&nbsp;欢迎注册！</p>
      <div style="margin-top: 10px"></div>
      <el-avatar :src="changeimg" style="cursor: pointer" title="点击修改图片" @click.native.prevent="getimg"></el-avatar>
      <input type="file" id="imgup" ref="inputer" accept="image/*" @change="upload_photo"
             style="display: none;"/>
      <div style="margin-top: 10px"></div>
      <el-form status-icon autocomplete="off">
        <el-form-item>
          <el-input
              prefix-icon="el-icon-user"
              type="text"
              placeholder="昵称"
              v-model="formCustom.nickname"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              style="width:100%"
              prefix-icon="el-icon-phone"
              type="text"
              placeholder="手机号"
              v-model="formCustom.phone"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="密码"
              v-model="formCustom.password"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="确认密码"
              v-model="formCustom.checkPass"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button v-loading="loading" class="btn" @click="changw">注册</el-button>
          <!--          <div class="a-tag user">-->
          <!--            &lt;!&ndash;              <router-link to="/forget">找回密码</router-link>&ndash;&gt;-->
          <!--            <router-link to="/login">立即登录</router-link>-->
          <!--          </div>-->
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      loading: false,
      restaurants: [],
      formCustom: {
        nickname: "",
        password: "",
        checkPass: "",
        phone: "",
        headPortraitId: ""
      },
      changeimg: require("../assets/icon-注册头像.png"),
      formData: null,
      // changeimg: "",
    };
  },
  methods: {
    async changw() {
      if (this.formCustom.phone == "" || this.formCustom.nickname == "" || this.formCustom.password == "" || this.formCustom.checkPass == "") {
        this.$message.error("请输入全部信息！！")
        return
      }
      if (!this.phoneFun(this.formCustom.phone)) {
        this.$message.error("请输入正确手机号！！")
        return
      }
      if (this.formCustom.password != this.formCustom.checkPass) {
        this.$message.error("两次密码输入不一致！！")
        return
      }
      if (this.formData == null) {
        this.$message.error("请设置头像！！")
        return
      }
      this.$http({
        method: "post",
        url: "/login/uploadImg",
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        data: this.formData
      }).then(data => {
        //console.log(data)
        if (data.code == 200) {
          this.login(data.data)
        }
      })
    },
    upload_photo() {
      const file = document.getElementById('imgup');
      const fileObj = file.files[0];
      const windowURL = window.URL || window.webkitURL;
      if (file && fileObj) {
        const dataURl = windowURL.createObjectURL(fileObj);
        this.changeimg = dataURl;
        let formData = new FormData();
        formData.append('file', fileObj);
        this.formData = formData;
      }
    },
    getimg() {
      document.getElementById("imgup").click();
    },
    phoneFun(phones) {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(phones)) {
        return false;
      } else {
        return true;
      }
    },
    login(headPortraitId) {
      if (this.formCustom.phone == "" || this.formCustom.nickname == "" || this.formCustom.password == "" || this.formCustom.checkPass == "") {
        this.$message.error("请输入全部信息！！")
        return
      }
      if (!this.phoneFun(this.formCustom.phone)) {
        this.$message.error("请输入正确手机号！！")
        return
      }
      if (this.formCustom.password != this.formCustom.checkPass) {
        this.$message.error("两次密码输入不一致！！")
        return
      }
      if (this.formData == null) {
        this.$message.error("请设置头像！！")
        return
      }
      this.formCustom.headPortraitId = headPortraitId
      //console.log(this.formCustom)
      this.$http.post("/login/register", this.formCustom).then(async data => {
        if (data.code == 400) {
          this.$message.error(data.message)
          this.changeimg = require("../assets/icon-注册头像.png")
          this.formCustom = {
            nickname: "",
            password: "",
            checkPass: "",
            phone: "",
            headPortraitId: ""
          }
        } else {
          this.$message.success("注册成功！")
          this.$router.push("/login")
        }
      })
    },
    querySearch(queryString, callback) {
      let restaurants = this.restaurants;
      let results = JSON.parse(JSON.stringify(restaurants)); //把数组的浅复制换成深复制
      for (let item in results) {
        results[item].value =
            queryString.split("@")[0] + "" + restaurants[item].value;
      }
      callback(results);
    },
    loadAll() {
      return [
        {value: "@qq.com"},
        {value: "@126.com"},
        {value: "@163.com"},
        {value: "@sohu.com"},
      ];
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
}
</script>

<style scoped>
.register {
  height: 100vh;
  background: linear-gradient(
      270deg, rgb(219, 223, 229), rgba(125, 227, 133, 0.5), rgba(220, 67, 126, 0.5));
}

.card {
  width: 300px;
  /*height: 350px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

p {
  text-align: center;
  color: #51cacc;
  line-height: 30px;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-top: 15px;
}

.btn {
  width: 60%;
  height: 40px;
  background-image: linear-gradient(
      270deg, rgba(142, 239, 252, .9), rgba(142, 197, 252, .6));
  color: #fff;
  margin: 20px 0;
}
</style>